<template>
	<div>
		<Input v-model="value" placeholder="请输入..." style="width: 300px"></Input> 
		<Button type="primary" :loading="loading" @click="search">搜索</Button>
		<div style="margin:16px 16px 16px 0;">
			<Row>
				<Col span="4"><h3>组织架构</h3></Col>
				<Col span="8"><Button type="primary" icon="person-add" @click="add">新增</Button></Col>
			</Row>
		</div>
	    <Table border  :loading="loading" :columns="columns" :data="list"></Table>
	    <div class="">
	    	<Page :total="page.totalElements" :page-size="page.pageSize" show-total @on-change="changepage"></Page>
	    </div>
	    <EmployeeDes :info="info"  @upup="refreshData"></EmployeeDes>
    </div>
</template>
<script>
	import EmployeeDes from './employeeDes.vue';
    export default {
        data () {
            return {
            	loading: true,
            	value:"",
            	list:[],
            	info:{
            		id:"",
            		title:"",
            		show:false,
            		formItem: {
					},
            	},
            	page:{
            		pageNo:0,
            		totalElements:0,
            		pageSize:4
            	},
                columns: [
               	 	{
                        title: '工号',
                        key: 'employee_num'
                    },
                    {
                        title: '姓名',
                        key: 'name',
                    },
                    {
                        title: '性别',
                        key: 'sex',
                        render: (h, params) => {
                        	let _sex=params.row.sex=="male"?"男":"女";
                        	return h('span',_sex)
                        }
                    },
                    {
                        title: '联系电话',
                        key: 'phone'
                    },
                    {
                        title: '状态',
                        key: 'status',
                        render: (h, params) => {
	                        let _status={"working":"在职","leaving":"离职","probation":"试用"}
	                    	return h('span',_status[params.row.status])
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.edit(params.row.id)
                                        }
                                    }
                                }, '详情'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.row.id)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
            }
        },
        components:{
        	EmployeeDes
        },
        methods: {
        	refreshData(){
        		if(this.info.method==="post"){
					this.page.pageNo=0;
        		}
        		this.loading=true;
				this.$ajax({
					url: "/employee/findPage",
					method: "post",
					data:{
						"fields": {
							"value": this.value
						},
						"page_no": this.page.pageNo,
						"page_size": this.page.pageSize,
						"sort_fields": "created_date",
						"sort_type": "DESC"
					}
				}).then((d) => {
					this.loading=false;
					this.page.totalElements=d.total;
					this.list=d.data;
				})
        	},
        	changepage(page){
        		this.page.pageNo=page-1;
        		this.refreshData();
        	},
        	search(){
        		this.refreshData();
        	},
        	add(){
                this.info.show=true;
                this.info.formItem={
                		"id":"",
						"employee_num" : "" ,
						"name" : "" ,
						"id_card" : "" ,
						"sex" :"",
						"phone" : "" ,
						"edu_background":"" ,
						"graduate_school" :"" ,
						"id_card_photo" :"http://imgtu.5011.net/uploads/content/20170414/6256421492148399.jpg" ,
						"market" :"",
						"status":"",
						"report_date":"",
						"leaving_date" :"" ,
						"photo":"http://imgtu.5011.net/uploads/content/20170414/6256421492148399.jpg"  ,
						"region":"杭州" ,
						"tenant_id":"1"
                }
                this.info.title="新增";
				this.info.method="post";
        	},
            edit (index) {
            	console.log(index)
                this.info.id=index;
                this.$ajax({
					url: "http://101.132.156.26:1000/employee/"+index,
					method: "get",
					data: ""
				}).then((d) => {
					this.loading=false;
					this.info.title="编辑";
					this.info.method="put";
                	this.info.formItem=d.data;
                	this.info.show=true;
				})
            },
            remove (index) {
            	 this.$Modal.confirm({
                    title: '确认删除',
                    content: '<p>是否删除此员工</p>',
                    onOk: () => {
                        this.$ajax({
							url: "http://101.132.156.26:1000/employee/"+index,
							method: "delete",
							data: ""
						}).then((d) => {
							console.log(d)
							if(d.message==="success"){
								this.$Message.success('删除成功');
								this.refreshData();
								console.log("chenggong")
							}else{
								this.$Message.warning(d.message);
								refreshData();
							}
						})
                    },
                    onCancel: () => {
                    }
                });
            }
        },
        mounted() {
			this.$ajax({
				url: "/employee/findPage",
				method: "post",
				data:{
					"fields": {
						"value": ""
					},
					"page_no": this.page.pageNo,
					"page_size": this.page.pageSize,
					"sort_fields": "created_date",
					"sort_type": "DESC"
				}
			}).then((d) => {
				this.loading=false;
				this.page.totalElements=d.total;
				this.list=d.data;
				console.log(d)
			})
		}
    }
</script>
